<template>
  <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="标题" prop="title">
           <el-input
              v-model="queryParams.title"
              placeholder="模糊搜索"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
           />
        </el-form-item>
        <el-form-item label="正文" prop="article">
           <el-input
              v-model="queryParams.article"
              placeholder="模糊搜索"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
           />
        </el-form-item>
        <el-form-item>
           <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
           <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
     </el-form>

     <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
           <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              
           >新增</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>

     <el-table v-loading="loading" :data="tableData">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="id" align="center" prop="id" width="100">
        </el-table-column>
        <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
        <el-table-column label="配图" align="center" prop="focus_pic" width="150">
           <template #default="scope">
              <el-image
                  v-if="scope.row.focus_pic"
                 style="width: 50px; height: 50px"
                 :src="scope.row.focus_pic"
                 fit="cover"
              />
           </template>
        </el-table-column>
        <el-table-column label="视频" align="center" prop="focus_video" width="150" />
        <el-table-column label="作者" align="center" prop="author" width="150" />
        <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
           <template #default="scope">
              <span>{{ parseTime(scope.row.createdAt) }}</span>
           </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" >删除</el-button>
           </template>
        </el-table-column>
     </el-table>

     <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.size"
        @pagination="getList"
     />

     <!-- 添加或修改公告对话框 -->
     <el-dialog :title="title" v-model="open" width="80%" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
           <el-row>
              <el-col :span="12">
                 <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="简述" prop="desc">
                    <el-input v-model="form.desc" placeholder="请输入" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="外链" prop="link">
                    <el-input v-model="form.link" placeholder="请输入" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author" placeholder="请输入" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="发布时间" prop="createdAt">
                    <el-date-picker
                       v-model="form.createdAt"
                       style="width: 100%;"
                    ></el-date-picker>
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="排序" prop="top">
                    <el-input-number v-model="form.top" :min="1" :max="100" style="width: 100%;" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="是否热点" prop="hot">
                    <el-switch v-model="form.hot" active-text="是" inactive-text="否" />
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="主图" prop="focus_pic">
                    <ImageUpload v-model="form.focus_pic" :limit="1"></ImageUpload>
                 </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="视频地址" prop="focus_video">
                    <el-input v-model="form.focus_video" placeholder="请输入" />
                 </el-form-item>
              </el-col>
              
              <el-col :span="24">
                 <el-form-item label="内容" prop="article">
                   <editor v-model="form.article" :min-height="192"/>
                 </el-form-item>
              </el-col>
           </el-row>
           <el-card>
              <el-row>
                 <el-col :span="24">
                    <el-form-item label="页头title" prop="head_title">
                       <el-input v-model="form.head_title" placeholder="请输入" />
                    </el-form-item>
                 </el-col>
                 <el-col :span="24">
                    <el-form-item label="页头key" prop="head_key">
                       <el-input v-model="form.head_key" placeholder="请输入" />
                    </el-form-item>
                 </el-col>
                 <el-col :span="24">
                    <el-form-item label="页头desc" prop="head_desc">
                       <el-input v-model="form.head_desc" placeholder="请输入" />
                    </el-form-item>
                 </el-col>
              </el-row>
           </el-card>
        </el-form>
        <template #footer>
           <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
           </div>
        </template>
     </el-dialog>
  </div>
</template>

<script setup name="UserManage">
import { getPageList, addForm, editForm, deleteData } from "@/api/dudu";

// api url
const props = defineProps({
    url: {
        type: String,
        default: '/info'
    },
})
const { proxy } = getCurrentInstance();

const tableData = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
 form: {},
 queryParams: {
   page: 1,
   size: 10,
   title: undefined,
   article: undefined,
   status: undefined
 },
 rules: {
   title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
 },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询页面列表 */
function getList() {
 loading.value = true;
 getPageList(props.url, queryParams.value).then(res => {
  console.log(res);
   tableData.value = res.result.list;
   total.value = res.result.total;
   loading.value = false;
 });
}

/** 取消按钮 */
function cancel() {
 open.value = false;
 reset();
}

/** 表单重置 */
function reset() {
  form.value = {
     title: undefined,
     focus_pic: undefined,
     focus_video: undefined,
     desc: undefined,
     article: undefined,
     author: undefined,
     hot: undefined,
     top: undefined,
     published: undefined,
     head_title: undefined,
     head_key: undefined,
     head_desc: undefined,
     link: undefined,
     createdAt: undefined,
  };
 
 proxy.resetForm("formRef");
}

/** 搜索按钮操作 */
function handleQuery() {
 queryParams.value.page = 1;
 getList();
}

/** 重置按钮操作 */
function resetQuery() {
 proxy.resetForm("queryRef");
 handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
 reset();
 open.value = true;
 title.value = "添加";
}

/**修改按钮操作 */
function handleUpdate(row) {
 reset();
 form.value = row;
 open.value = true;
 title.value = "修改";
}

/** 提交按钮 */
function submitForm() {
 proxy.$refs["formRef"].validate(valid => {
   if (valid) {
     if (form.value.noticeId != undefined) {
        editForm(props.url, form.value).then(response => {
         proxy.$modal.msgSuccess("修改成功");
         open.value = false;
         getList();
       });
     } else {
        addForm(props.url,form.value).then(response => {
         proxy.$modal.msgSuccess("新增成功");
         open.value = false;
         getList();
       });
     }
   }
 });
}

/** 删除按钮操作 */
function handleDelete(row) {
 proxy.$modal.confirm('是否确认删除？').then(function() {
   return deleteData(props.url, row.id);
 }).then(() => {
   getList();
   proxy.$modal.msgSuccess("删除成功");
 }).catch(() => {});
}

getList();
</script>
